/**
 * Created by haua on 16/1/13.
 * 需引用jquery
 * @author hhh
 */
(function(){
    var winHeight = $(window).height();
    /**
     * @param doms string|array|jquery|dom 这个参数会用于 $() 的参数，是弹窗内容
     * @param arg object 参数
     * @param arg.dom Dom/DomArray 弹窗内容dom，此dom需要在html中写好，display:none。可接受数组（数组内为dom）
     * @param arg.style ='window' 弹窗的样式，有 holePage/window/buttons
     * @param arg.position ='center,center' 弹窗的位置,有top,left,right,bottom,center,目前只支持center
     * @param arg.needBg =true
     * @param arg.maxBig =false 是否永远显示最大尺寸，否则将根据内容的多少来设置尺寸
     * @param arg.usePushState =false 打开和关闭窗口是否使用pushState，使用的话可以做到点击返回键是关闭弹窗，而不是返回上一页
     * */
    function HFloatWin(doms,arg){
        var fWin = document.createElement('div');
        fWin.id = 'h_floatWindow_'+H.getRandChar();
        this.id = fWin.id;
        if(!arg)
            arg = {};
        this.style = arg.style||'window';//这个浮窗的样式是怎样的，有几个固定的选项
        this.needBg = arg.needBg!==false;

        this.fWindow = $(fWin);//这个浮窗
        this.fWindow.addClass('h_floatWindow '+this.style+' '+(this.needBg&&this.style!='holePage'?'black':''));
        this.fWindow.css('display','none');

        this.position = arg.position;

        this.openTime = 0; //此窗口的打开次数
        this.maxBig = arg.maxBig;

        this.isOpening = false;//这个弹窗是否打开中

        this.usePushState = !!arg.usePushState;
        if(this.usePushState){
            var thi = this;
            $(window).on('popstate',function(){
                if(thi.isOpening){
                    var existState = history.state||{};
                    if(!existState.HWin){//为了防止不知道哪里出了问题会没有这个，所以
                        thi.close('down');
                    }else if(existState.HWin.previd==thi.id){//这里默认用户点击的是返回键，所以要关掉上一个页面的弹窗
                        thi.close('down');
                    }
                }
            });
        }

        this.doms = $.isArray(doms)?doms:[doms];//通过参数传进来的dom，这些dom被添加到fWindow内之后就没用的了。

        this.creat();
    }

    HFloatWin.prototype = {
        /**
         * 创建弹窗
         */
        creat: function(){
            var HTML = '<div class="HWinContent HJS_POSITION"></div>'.replace('HJS_POSITION',this.position=='center,center'?'center':'');
            this.fWindow.append(HTML);
            this.content = this.fWindow.find('.HWinContent');
            this.content.append(this.doms);
            if(this.style=='window'&&this.maxBig){
                this.content.css('height','90%');
            }

            this.content.click(function(e){
                e.stopPropagation(); //阻止事件冒泡
            });
            var thi = this;
            this.fWindow.click(function () {
                thi.close('down');
            });

            document.body.appendChild(this.fWindow[0]);
        },

        /**
         * 打开弹窗
         * @param effect string 动画效果，目前只有从下向上一种
         */
        open: function(effect){
            var thi = this,
                $win = thi.fWindow;
            $win.show();
            thi.isOpening = true;
            if(effect=='up'){
                $win.css({
                    transform: 'translate3d(0,'+$win.height()+'px,0)'
                });
                setTimeout(function(){
                    $win.on(H.transitionEnd(),function(){
                        $win.css({
                            transition: 'none'
                        });
                    });
                    $win.css({
                        transform: 'translate3d(0,0,0)',
                        transition: 'transform 0.25s'
                    });
                },1);
            }
            if(thi.usePushState){
                //除了使用pushState还要使用replaceState的原因是：当点击返回按钮时，需要了解到要收起的win是哪个，因为可能同时打开的win有多个。
                history.replaceState({HWin:{
                    previd:thi.id//表示的并不是当前页面正在展示的id，而是接下来的页面的id
                }}, "页面标题", "");
                //这里不用加上id，是因为打开弹窗后暂时没有需求要读id
                history.pushState({HWin:{
                    thisid:thi.id//因为这时已经打开新页面了，这个表示的是当前页面正在打开的弹窗id
                }}, "", "#openWin");
            }
            thi.openTime++;
        },

        /**
         * 关闭弹窗
         * @param effect string 动画效果，目前只有从上向下一种
         */
        close: function(effect){
            var $win = this.fWindow;
            // console.log(effect);
            this.isOpening = false;
            if(effect=='down'){
                setTimeout(function(){
                    var yValue = $win.height(),
                        endTran = 'translate3d(0,'+yValue+'px,0)';
                    $win.on(H.transitionEnd(),function(){
                        if($win[0]&&($win[0].style.transform.indexOf(yValue)>=0)){//当 transform 的设置有 yValue 的值时，如果要判断得准确一点，要研究矩阵，这个现在没时间研究...
                            $win.hide();
                        }
                        $win.css({
                            transition: 'none'
                        });
                    });
                    $win.css({
                        transform: endTran,
                        transition: 'transform 0.25s'
                    });
                },1);
            }else{
                $win.hide();
            }
        },

        /**
         * 设置弹窗等的位置（未写好的）
         * */
        setPosition:function(){
            var $thisWindow = $(this.fWindow);
            if($thisWindow.is(':hidden'))
                return;

            var mainContent = $thisWindow.find('.HWinContent');

            //浮窗距离顶部的位置
            if(this.style!='holePage'){
                mainContent.css('margin-top',(winHeight-mainContent.height())/2+'px');
            }
        }
    };

    window.HFloatWin = HFloatWin;

    //引用js即执行的代码
    (function(){
        //添加css到页面中
        var cssClass = 'HFloatStyle',
            styleCss = '<style class="'+cssClass+'">' +
            '.h_floatWindow{'+
                'position: fixed;top: 0;left: 0;z-index: 8;width: 100%;height: 100%;-webkit-overflow-scrolling: touch;'+
            '}'+
            '.h_floatWindow.black{'+
                'background: rgba(0,0,0,0.5);'+
            '}'+
            '.h_floatWindow .HWinContent{'+
                'position: relative;'+
            '}' +
            '.h_floatWindow .HWinContent.center{' +
                'top:50%;left: 50%;' +
                '-webkit-transform: translate(-50%,-50%);-moz-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);-o-transform: translate(-50%,-50%);transform: translate(-50%,-50%);' +
            '}'+
            '.h_floatWindow.window .HWinContent{'+
                'width: 90%;max-height:90%;border-radius: 8px;'+
            '}'+
            '.h_floatWindow.holePage .HWinContent{'+
                'width: 100%;height: 100%;background: #fff;overflow: auto;'+
            '}'+
            '</style>',
            $head = $('head');
        if(!$head.find('.'+cssClass).length)
            $head.append(styleCss);
    }());
}());